<template>
    <div class="app">
        <my-navbar title="店铺设置"></my-navbar>
        <list>
            <cell>
                <div class="mine-list">
                    <div class="mine-list-item-head" @click="pick">
                        <text class="mine-list-item-title">公司logo</text>
                        <div class="login-flex">
                            <image v-if="haveAvatar" :src="user.logo" class="mine-list-item-headImage"></image>
                            <text class="mine-list-item-head-placeholder" v-else>点击获取头像信息</text>
                            <text class="mine-list-item-head-icon">&#xe61f;</text>
                        </div>
                    </div>
                    <div class="mine-list-item">
                        <text class="mine-list-item-title">公司名称</text>
                        <div class="login-flex">
                            <input placeholder="请输入公司名" class="input" v-model="user.name"/>
                        </div>
                    </div>
                    <div class="mine-list-item">
                        <text class="mine-list-item-title">客服电话</text>
                        <div class="login-flex">
                            <input placeholder="请输入客服电话" class="input" v-model="user.phone"/>
                        </div>
                    </div>
                    <div class="mine-list-item">
                        <text class="mine-list-item-title">通知公告</text>
                        <div class="login-flex">
                            <input placeholder="请输入公告" class="input" v-model="user.notice"/>
                        </div>
                    </div>
                    <div class="mine-list-item">
                        <text class="mine-list-item-title">允许退货</text>
                        <div class="login-flex">
                            <switch :checked="user.allowReturn" @change="allowReturnClick"></switch>
                        </div>

                    </div>
                    <div class="mine-list-item">
                        <text class="mine-list-item-title">自动接单</text>
                        <div class="login-flex">
                            <switch :checked="shippingMethod" @change="shippingMethodClick"></switch>
                        </div>

                    </div>
                    <div class="mine-list-item">
                        <text class="mine-list-item-title">货到付款</text>
                        <div class="login-flexTwo">
                            <switch :checked="user.offLinePay" @change='offLinePayClick'></switch>
                        </div>

                    </div>
                </div>

                <div class="mine-list">
                    <div class="mine-list-button" @click="saveClick">
                        <text class="mine-list-button-title">保存</text>
                    </div>
                </div>
            </cell>
        </list>
    </div>
</template>

<script>
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import {getInfo,update} from "../../../api/enterprise.js";
    import {
        policy
    } from '../../../api/oss'
    const picture = app.requireModule("eeui/picture");
    const network = app.requireModule("eeui/network");
    const picker = weex.requireModule('picker')
    export default {
        data() {
            return {
                user:{},
                haveAvatar:true,
                dataObj: {
                    policy: '',
                    signature: '',
                    key: '',
                    ossaccessKeyId: '',
                    dir: '',
                    host: ''
                },
                value:0,
                uuid: '',
                images: [],
                shippingMethod:false
            }
        },
        components: {
            myNavbar
        },
        created() {
            this.initIconFont()
            this.getUser()
            this.beforeUpload()
        },
        methods: {
            getUser() {
                getInfo().then(response => {
                    this.user = response.data;
                    if (this.user.shippingMethod == 0){
                        this.shippingMethod = false
                    } else {
                        this.shippingMethod = true
                    }
                    if (this.user.logo == null) {
                        this.haveAvatar = false
                        this.user.logo=''
                    }
                }).catch(error => {

                })
            },
            loginOut(){
                var _this = this
                eeui.openPage({
                        url: 'root://pages/login/msgLogin.js',
                        statusBarType: 'immersion',
                        statusBarStyle: false
                    },
                    (result) => {
                        if (result.status == 'stop') {
                            // _this.loginOut()
                        }
                    }
                );
            },
            checkAuthorize(){
                this.user.logo = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=183246121,2109342373&fm=26&gp=0.jpg';
                this.haveAvatar = true
            },
            pick () {
                picker.pick({
                    items: ['本地上传', '拍照上传']
                }, event => {
                    if (event.result === 'success') {
                        this.value = event.data
                        this.fileClick()
                    }
                })
            },
            beforeUpload() {
                let _self = this;
                policy({mchId: this.getGlobalData().mchId}).then(response => {
                    _self.dataObj.policy = response.data.policy;
                    _self.dataObj.signature = response.data.signature;
                    _self.dataObj.ossaccessKeyId = response.data.accessKeyId;
                    _self.dataObj.dir = response.data.dir;
                    _self.dataObj.key = response.data.dir + '/' + _self.uuid + "${filename}";
                    _self.dataObj.host = response.data.action;
                    _self.host = response.data.host
                }).catch(err => {
                    console.log(err)
                })
            },
            fileClick() {
                var _this = this
                _this.uuid = this.getUUID()
                if (this.value == 0){
                    picture.create({
                        type:'gallery',
                        gallery: 1,
                        mode: 1
                    }, function (result) {
                        if (result.status == 'success') {
                            var tempFilePath = result.lists[0].path
                            _this.uploadImg(tempFilePath)
                        }
                    });
                } else if (this.value == 1){
                    picture.create({
                        type:'camera',
                        gallery: 1,
                        mode: 1
                    }, function (result) {
                        if (result.status == 'success') {
                            var tempFilePath = result.lists[0].path
                            _this.uploadImg(tempFilePath)
                        }
                    });
                }
            },
            // 上传图片
            uploadImg(filePath) {
                let _this = this;
                eeui.loading();
                var typePath = filePath;
                _this.typePath = typePath.split('.')
                _this.dataObj.key = _this.dataObj.dir+ '/' + _this.uuid +'.'+  _this.typePath[_this.typePath.length-1];
                network.upload({
                    url: _this.dataObj.host,
                    path: filePath,
                    name: 'file',
                    formData: _this.dataObj,
                }, (ret) => {
                    if (ret.status == 200 || ret.status == 204) {
                        _this.user.logo = _this.dataObj.host + '/' + _this.dataObj.dir + '/' + _this.uuid+'.'+_this.typePath[_this.typePath.length-1]
                    }
                    if (ret.status != 100){
                        eeui.loadingClose();
                    }
                })
            },
            saveClick(){
                var _this = this
                _this.loading = true;
                update(_this.user).then(response => {
                   eeui.toast(response.content);
                   eeui.closePage()
                }).catch(error => {

                });
            },
            allowReturnClick(e){
                this.user.allowReturn = e.value
            },
            offLinePayClick(e){
                this.user.offLinePay = e.value
            },
            shippingMethodClick(e){
                this.shippingMethod = e.value
                if (e.value == false){
                    this.user.shippingMethod = 0
                } else {
                    this.user.shippingMethod = 1
                }
            }
        }
    }
</script>

<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }

    .app {
        flex: 1
    }

    .mine-list {
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 20px;
        margin-left: 20px;
        margin-right: 20px;
        margin-bottom: 20px;
        padding-left: 25px;
        padding-right: 25px;
        box-sizing: border-box;
    }

    .mine-list-item {
        /*height: 82px;*/
        position: relative;
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 20px;
        /*padding-left: 27px;*/
        /*padding-right: 27px;*/
    }

    .contact {
        opacity: 0.5;
        font-weight: 400;
    }

    .mine-list-item-head {
        height: 126px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        /*padding: 0 27px;*/
        position: relative;
        /*border-bottom-style: solid;*/
        /*border-bottom-width: 1px;*/
        /*border-bottom-color: rgba(0,0,0,0.1);*/
    }

    .mine-list-item-title {
        color: rgba(26, 26, 30, 1);
        font-size: 30px;
    }

    .mine-list-item-head-placeholder {
        color: #b4b4b4;
    }

    .mine-list-item-headImage {
        width: 90px;
        height: 90px;
        border-radius: 50%;
        overflow: hidden;
        display: block;
        border-style: solid;
        border-width: 2px;
        border-color: #fff;
    }

    .mine-list-item-head-icon {
        font-size: 30px;
        opacity: 0.5;
        font-family: iconfont2;
    }

    .login-flex {
        display: flex;
        flex-direction: row;
        align-items: center;
        border-bottom-style: solid;
        border-bottom-width: 1px;
        border-bottom-color: rgba(143,143,143,0.2);
        padding-bottom: 20px;
        width: 520px;
        justify-content: flex-end;
    }

    .login-flexTwo{
        display: flex;
        flex-direction: row;
        align-items: center;
        padding-bottom: 20px;
        width: 520px;
        justify-content: flex-end;
    }

    .mine-list-button {
        padding: 0;
        height: 82px;
        background-color: rgba(255, 255, 255, 1);
        font-size: 28px;
        line-height: 82px;
        font-weight: bold;
        color: rgba(26, 26, 30, 1);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .mine-list-button-title{
        font-size: 30px;
    }
    .input{
        width: 500px;
        height: 70px;
        /*border-style: solid;*/
        /*border-width: 1px;*/
        /*border-color: rgba(143,143,143,0.2);*/
        text-align: right;
        border-radius: 10px;
        padding-right: 20px;
        font-size: 26px;
    }
</style>
